<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head></head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
      type="text/css"/>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js"
        type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

<style>
  body {
    margin-top: 20px;
    margin: 0 auto;
  }

  .carousel-inner .item img {
    width: 100%;
    height: 300px;
  }

  .container .row div {
    /* position:relative;
    float:left; */
  }

  font {
    color: #3164af;
    font-size: 18px;
    font-weight: normal;
    padding: 0 10px;
  }

  .font20 {
    font-size: 20px;
  }
</style>
</head>
<body>


<jsp:include page="head.jsp"/>

<div class="container"
     style="width: 100%;background-size:cover;background:url('${pageContext.request.contextPath}/images/back1.jpg');">
  <div class="row">

    <div class="col-md-2"></div>

    <div class="col-md-5"
         style="padding:40px 80px;margin:30px;">
      <font>忘记密码</font><span style="color: red" id="warn"></span>

      <form class="form-horizontal" style="margin-top:5px;" method="post">
        <div class="form-group">
          <label for="username" class="font20 col-sm-2 control-label">用户名</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="username" placeholder="请输入用户名"
                   name="username">
          </div>
          <span id="username_msg" class="username_msg"></span>
        </div>
        <div class="form-group">
          <label for="email" class="font20 col-sm-2 control-label">Email</label>
          <div class="col-sm-6">
            <input type="email" class="form-control" id="email" placeholder="Email" name="email">
          </div>
        </div>

        <div class="form-group">
          <label for="code" class="font20 col-sm-2 control-label">验证码</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="code" name="code">
          </div>
          <div class="col-sm-3">
            <input type="button" id="sendmail" class="btn" value="立即发送">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <input id="sub" type="button" width="100" value="提交" name="submit" border="0"
                   style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                           height:35px;width:100px;color:white;">
          </div>
        </div>
      </form>

    </div>

    <div class="col-md-2"></div>

  </div>
</div>

<jsp:include page="foot.jsp"/>

</body>
<script>

  $("#sub").click(function () {
    $.post("${pageContext.request.contextPath}/user/forgetCheckCode.do",
        {
          username: $("#username").val(),
          email: $("#email").val(),
          code: $("#code").val(),
        },
        function (d) {
          if (d.msc == -1) {
            $("#warn").html("验证码错误，请重新输入验证码");
          } else {
            $("#warn").html("");
            location.href = "${pageContext.request.contextPath}/user/forgetGoReset.do?username="
                + d.data.username;
          }
        },
        "json"
    )
  })

  $("#sendmail").click(function () {
    $("#sendmail").setBtnTimer();
    $.ajax({
      url: "${pageContext.request.contextPath}/user/forgetSendEmail.do",
      data: {
        username: $("#username").val(),
        email: $("#email").val(),
      }
    })
  })

  $.fn.setBtnTimer = function (options) {
    "use strict";
    var defaults = {
      'time': 60
    };
    var settings = $.extend({}, defaults, options);
    this.attr("disabled", "disabled");
    var that = this,
        oldv = that.val(),
        timer,
        tick = function () {
          settings.time--;
          that.val(settings.time + 's后可再次操作');
          if (settings.time < 1) {
            that.removeAttr("disabled");
            window.clearInterval(timer);
            that.val(oldv);
          }
        };
    return this.each(function () {
      timer = window.setInterval(tick, 1000);
    });
  }
</script>
</html>




